<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作用域插槽</title>
</head>

<body>
    <!-- 插槽: 定义组件的时候, 封装标签, 有一个地方标签不确定就可以留下<slot></slot>占位
        使用: 组件标签的时候, 夹着的地方传入标签替换到<slot></slot>位置上
    
        需求: 我想区别的使用子组件里的数据显示到插槽具体的标签上
        解决: 插槽作用域(插槽绑定的变量想要在使用组件时候调用)
    -->
    <div id="app">
        <child v-slot="sss">
            <!-- 2. 可以在标签上v-slot(或者slot-scope)属性: 声明一个变量去绑定
                <slot>身上的所有属性
                    sss: {a: 10, b: 20}
            -->
            <div>我是插槽要用到slot位置上显示的 {{ sss.a }}</div>
        </child>
    </div>
    <template id="child">
        <div>
            <p>我是个子组件</p>
            <!-- 1. 插槽上定义属性和值 -->
            <slot :a="10" :b=20></slot>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            components: {
                child: {
                    template: `#child`
                }
            }
        })
    </script>
</body>

</html>